<div ng-controller="TaskCtrl as vm">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <h3 class="box-title">HUMAN RESOURCES AND TRAINING PRE-OPENING ACTIVITIES UPDATE</h3>
                    <small>(Last Updated: {{vm.lastUpdated | date:'yyyy-MM-dd HH:mm'}} by {{vm.updateBy}}) </small>
                    <small class="text-warning">{{vm.msg}}</small>
                    <small class="text-danger">{{vm.errmsg}}</small>

                    <div class="pull-right">
                        <button class="btn btn-danger btn-xs " ng-disabled="vm.loading" ng-click="vm.saveTable()"><i class="fa fa-check-square-o"></i>Save</button>
                        <a class="btn btn-warning btn-xs " ng-href="/api/preopen/export/task/{{vm.hotelId}}">Export</a>
                    </div>
                </div>
                <div class="box-body table-responsive no-padding" style="height: 1800px">
                    <div class="row margin">
                        <div class="col-md-12">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Hotel Name</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" disabled ng-model="vm.hotelName">
                                    </div>
                                </div>
                                <div class="form-group" ng-class="{'has-error': vm.errmsg}">
                                    <label class="col-sm-2 control-label">Target Opening Date</label>
                                    <div class="col-sm-10">
                                        <span class="input-group" >
                                          <input type="text" ng-disabled="!vm.editable" class="form-control" uib-datepicker-popup ng-model="vm.opendate" is-open="vm.opendate.opened" datepicker-options="dateOptions"  ng-required="true" close-text="Close" />
                                          <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" ng-click="open(vm.opendate,$event)" ><i class="glyphicon glyphicon-calendar"></i></button>
                                          </span>
                                        </span>
                                    </div>
                                </div>
                                 <div class="form-group">
                                    <label class="col-sm-2 control-label">Updated by:</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control"  ng-model="vm.updateBy">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <table ng-table="vm.tableParams" class="table table-hover table-bordered table-condensed" show-filter="true">
                        <tr ng-repeat="ret in $data">
                            <td width="5%" title="'No'" filter="{ no: 'text'}" sortable="'no'">
                                {{ret.no}}</td>
                            <td width="35%" title="'Task'" filter="{ taskname: 'text'}" sortable="'taskname'">
                                {{ret.taskname}}</td>
                            <td width="15%" title="'Deadline(Due Date)'">
                                <span ng-if="ret.type!=0" class="input-group">
                                          <input type="text" ng-disabled="!vm.editable" class="form-control" uib-datepicker-popup ng-model="ret.date" is-open="ret.opened" datepicker-options="dateOptions"  ng-required="true" close-text="Close"  readonly ng-change="vm.calculate(ret)"/>
                                          <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" ng-click="open(ret,$event)" ng-disabled="!vm.editable"><i class="glyphicon glyphicon-calendar"></i></button>
                                          </span>
                                </span>
                            </td>
                            <td width="15%" title="'Current Status'" filter="{ 'status': 'text'}" sortable="'status'">
                                <select ng-if="ret.type!=0" ng-disabled="!vm.editable" class="form-control" ng-options="div for div in vm.statusOptions track by div" ng-model="ret.status" ng-change="vm.calculate(ret)">
                                    <option value=''></option>
                                </select>
                            </td>
                            <td width="15%" title="'Remarks'" filter="{ 'remark': 'text'}" sortable="'remark'">
                                <input ng-if="ret.type!=0" type="text" class="form-control" ng-disabled="!vm.editable" ng-model="ret.remark" ng-change="vm.calculate(ret)" />
                            </td>
                            <td width="15%" title="'Action By'" filter="{ 'actionby': 'text'}" sortable="'actionby'">
                                <input ng-if="ret.type!=0" type="text" class="form-control" ng-disabled="!vm.editable" ng-model="ret.actionby" ng-change="vm.calculate(ret)" />
                            </td>
                        </tr>
                    </table>
                    <div class="row margin">
                        <div class="col-md-12">
                            <h3 class="box-title">Completion Rate</h3>
                            <table class="table table-hover table-bordered table-condensed">
                                <thead>
                                    <th></th>
                                    <th>Completed</th>
                                        <th>Total</th>
                                        <th>Rate</th>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th>HR</th>
                                         <td>{{vm.completion.hrNow}}</td>
                                        <td>{{vm.completion.hrAll}}</td>
                                        <td>{{vm.completion.hrPercentage *100|percentage}}</td>
                                        
                                    </tr>
                                    <tr>
                                        <th>Training</th>
                                        
                                        <td>{{vm.completion.trNow}}</td>
                                        <td>{{vm.completion.trAll}}</td>
                                        <td>{{vm.completion.trPercentage*100|percentage}}</td>
                                    </tr>
                                    <tr>
                                        <th>Overall</th>
                                        <td>{{vm.completion.totalNow}}</td>
                                        <td>{{vm.completion.totalAll}}</td>
                                        <td>{{vm.completion.totalPercentage*100|percentage}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
</div>
